﻿<!doctype html>
<html>

<head>
      <title>接口说明</title>
      <link rel="shortcut icon" href="../Images/api.ico" />
      <script type="text/javascript" src="/Utilities/Scripts/polyfill.min.js"></script>
      <script type="text/javascript" src="/Utilities/Scripts/axios_min.js"></script> 
      <script type="text/javascript" src="/Utilities/Scripts/api.js"></script>
      <script type="text/javascript" src="/Utilities/Scripts/vue.min.js"></script>
      <script type="text/javascript" src="/Utilities/Scripts/vue-router.js"></script>
      <script type="text/javascript" src="/Utilities/ElementUi/index.js"></script>
      <link rel="stylesheet" type="text/css" href="/Utilities/ElementUi/index.css" />


      <link href="Styles/index.css" rel="stylesheet" type="text/css" />
      <meta charset="utf-8">
</head>

<body>

      <section id="apiinfo">
            <menu id="menu">
                  <div class="tit" @dblclick="getapi(false)"> API List
                        <span>( <i v-html="total.method" title="接口方法数"></i>/<i v-html="total.apiobj" title="接口对象数"></i>
                              )</span>
                        <input type="text" name="search" id="apisearch" autofocus v-model="apisearch" />
                  </div>
                  <dl>
                        <dd v-for="(u,i) in list">
                              <methods :apiobject="u" :search="apisearch" :index="i+1" v-show="searhState(u)">
                              </methods>
                        </dd>
                        <dd v-if="loading" class="noapi">
                              <span>loading...</span>
                        </dd>
                        <dd v-else-if="apilist.length<1" class="noapi">
                              <span v-if="error==''">没有接口信息</span>
                              <span v-else>{{error}}</span>
                        </dd>

                  </dl>
                  <footer>郑州微厦计算机科技有限公司</footer>
            </menu>

            <context id="context">
                  <h1 v-on:click="helpshow=!helpshow">ViewData RESTful API 接口方法使用说明<span
                              :class="helpshow ? 'show' : 'hidden'"><i class="el-icon-caret-bottom"></i></span> </h1>
                  <div class="homepage">
                        <div class="method" v-if="method!=null">
                              <attr><b>特性：</b>
                                    <span v-for="item in method.Attrs">[{{item.Name}}
                                          <i v-show='item.Ignore'>
                                                (Ignore={{item.Ignore}})</i>
                                          <i v-show='item.Expires>0' title='缓存过期时间'>
                                                (Expires={{item.Expires}})</i>] </span>
                                    <span v-if="method.Attrs.length<1">无</span>
                              </attr>
                              <div @dblclick="copyApipath(method.ClassName,method.Name)" class="name" title="双击复制"
                                    v-html="method.ClassName +'.'+method.Name">
                                    <para>{{parameter}}</para>
                              </div>
                              <intro><b>摘要：</b><span v-html="method.Intro"></span></intro>
                              <params>
                                    <table cellspacing="0" cellpadding="0" border="0" v-show="method.Paras.length>0">
                                          <tr>
                                                <th width="40">#</th>
                                                <th width="100">参数</th>
                                                <th width="110">测试值</th>
                                                <th width="100" class="center">类型</th>
                                                <th width="80">可空</th>
                                                <th>说明</th>
                                          </tr>
                                          <tr v-for="(item,index) in method.Paras">
                                                <td>{{index+1}}</td>
                                                <td>{{item.Name}}</td>
                                                <td><input type="text" :name="item.Name"
                                                            v-on:input.prevent="teststring()" :datatype="item.Type" />
                                                </td>
                                                <td class="center">
                                                      {{item.Type.substring(item.Type.lastIndexOf('.')+1)}}
                                                </td>
                                                <td>{{item.Nullable}}</td>
                                                <td v-html="item.Intro"></td>
                                          </tr>
                                    </table>
                              </params>
                              <remarks v-if="method.Remarks!=''"><b>备注：</b>
                                    <div>
                                          <pre v-html="method.Remarks"></pre>
                                    </div>
                              </remarks>
                              <return><b>返回：</b>
                                    <span class="type">{{method.Return.Type}}</span>
                                    <div class="intro" v-if="method.Return.Intro!=''">
                                          <pre v-html="method.Return.Intro"></pre>
                                    </div>
                              </return>
                              <example v-if="method.Example!=''"><b>示例：</b>
                                    <pre v-html="method.Example"></pre>
                              </example>

                        </div>
                        <div class="testbox" v-if="method!=null" remark="测试接口">
                              <div class="test-tit">
                                    <div class="test-func">HTTP方法：
                                          <select id="httppre" v-on:change="teststring()">
                                                <option value="get">GET</option>
                                                <option value="post">POST</option>
                                                <option value="delete">DELETE</option>
                                                <option value="put">PUT</option>
                                                <option value="patch">PATHCH</option>
                                                <option value="options">OPTIONS</option>
                                                <option value="cache">CACHE</option>
                                          </select>
                                          返回：
                                          <select id="returntype">
                                                <option value="json">JSON</option>
                                                <option value="xml">XML</option>
                                          </select>
                                    </div>
                                    <div class="test-btn">
                                          <div v-on:click="testapi">
                                                <span v-show="!loading">测试</span>
                                                <span v-show='loading'> <i class='el-icon-loading'></i> 加载中...</span>
                                          </div>
                                          <div v-on:click="btnCopyEvent">复制js脚本</div>
                                          <div v-on:click="showcode=!showcode" v-html="showcode ? '隐藏脚本' : '显示脚本'">

                                          </div>
                                    </div>
                              </div>
                              <div id="testarea">
                                    <div v-show="showcode">
                                          <span id="apiurl"></span>

                                          <pre id="teststring"></pre>


                                    </div>
                                    <pre id="testresult"></pre>

                              </div>
                        </div>
                  </div>
                  <!-- 帮助内容-->
                  <div :style="helpshow ? '' : 'transform: scale(1, 0);opacity:0;'" class="homepage">


                      <P><b>单个访问</b> </P>
                      <pre>
      $api.get('Account/Current').then(function(req){
            if(req.data.success){
                  var result=req.data.result;
                  //...
            }else{
                  throw req.data.message;
            }
      }).catch(function (err) {
            alert(err);
            console.error(err);
      }).finally(()=>{});</pre>
                      <P><b>批量访问</b> </P>
                      <pre>
      //批量访问过中会验证结果是否异常，但不会触发catch
      $api.bat(
            $api.get('Account/Current'),
            $api.cache('Question/Types:9999'),
            $api.post('Course/ForID', { 'id': 123 })
      ).then(axios.spread(function (acc, type, cou, outline) {
            console.error(type);
      })).catch(err => alert(err))
      .finally(() => {
            console.log('finally');
      });
                        </pre>
                      <P><b>浏览器本地缓存</b> </P>
                      
                      <pre>
      //采用浏览器本地数据库(IndexedDB)存储接口数据
      //当接口与参数相同的$api.cache请求，在限定时效内将不再请求网络

      //缓存20分钟，数值可以为空，默认是10分钟
      $api.cache('News/Article:20',{ 'id': 225 }).then(function(req){
            if(req.data.success){
                  var result=req.data.result;
                  //...
            }else{
                  throw req.data.message;
            }
      }).catch(function (err) {
            alert(err);
            console.error(err);
      });
      //更新缓存
      $api.cache('News/Article:update',{'id':'1'});
      //清除缓存
      $api.cache('News/Article:clear',{'id':'1'});
      //强制缓存20分钟 （当禁用缓存时，通过加号，强制使用缓存）
      $api.cache('News/Article:+20',{'id':'1'});

      //清理过期缓存，包括被强制缓存的数据
      $api.api_cache.clear();
      //清除所有缓存，包括被强制缓存的数据
      $api.api_cache.reset();

</pre>
</div>
            </context>

      </section>
      <script type="text/javascript" src="Scripts/index.js"></script>
</body>

</html>